<template>
    <CognPupop :title="title" :visible="visible" @confirm="confirm" @cancel="cancel">
        <!-- 选择服务机构 -->
        <picker-view v-if="current === 1" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
            class="picker-view">
            <picker-view-column>
                <view class="item" v-for="(item, index) in organList" :key="index">{{ item.name }}</view>
            </picker-view-column>
        </picker-view>
        <!-- 兑换人脸验证 -->
        <view class="exchange-count" v-if="current === 2">
            <u--input placeholder="请输入兑换验证次数" type="number"
                customStyle="height: 45px;background-color: #F9F9F9;border: none;border-radius:12px;padding-left: 20px"
                clearable v-model="quantity"></u--input>
        </view>
        <!-- 兑换明细 -->
        <view class="exchangeWrap" v-if="current === 3">
            <view class="exchangeStyle">
                <view class="topStyle">
                    <div class="leftStyle">
                        <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/topTitile.svg" mode="widthFix" />
                        <text style="color: #fff;">本次兑换{{ quantity }}人次</text>
                    </div>
                    <div class="rightStyle">
                        <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/yellowMoneyIcon.svg" />
                        <text>余额: {{ exchangeInfo.userWalletVO.userBalance }}</text>
                        <div v-if="exchangeInfo.integralExchange" class="lineStyle"></div>
                        <text v-if="exchangeInfo.integralExchange">积分: {{ exchangeInfo.userWalletVO.userScore }}</text>
                    </div>
                </view>
                <scroll-view :scroll-y="true" class="centerStyle">
                    <div v-for="item in exchangeInfo.infoList">
                        <text v-if="exchangeInfo.currentModelType == 2">人次区间: {{ item.startInterval }}-{{ item.endInterval }},&nbsp;</text>
                        <text>单价: 金额: {{ item.stepCost }}/人次</text>
                        <text v-if="exchangeInfo.integralExchange">&nbsp;或&nbsp;积分: {{ item.stepIntegral }}/人次</text>
                    </div>
                </scroll-view>
                <view class="bottomStyle">
                    <text>总计：{{ exchangeInfo.totalAmountCost }}金额</text>
                    <text v-if="exchangeInfo.integralExchange">或{{ exchangeInfo.totalIntegralCost }}积分</text>
                </view>
            </view>
            <view class="v-center exchangeWay">
                <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/dhMethod.svg" />
                <text>兑换方式：</text>
                <view class="flex">
                    <view class="center flex" v-for="(item, index) in exchangeMethod" :key="index" @click="payType = item.value"
                        style="margin-right: 26rpx;">
                        <view class="radio-border">
                            <view class="radio-active" v-if="payType === item.value"></view>
                        </view>
                        <view style="margin-left: 20rpx;">{{ item.text }}</view>
                    </view>
                </view>
            </view>
        </view>
    </CognPupop>
</template>

<script>
import CognPupop from "@/improve/components/CognPupop/CognPupop.vue";
import { getOrganList, submitExchange, getExchangeInfo } from "@/improve/services";
import { exchangeMethod } from "@/improve/components/enum";
import { notificationFun } from "@/utils/PrjUtils";

const titleMap = {
    1: '选择服务机构',
    2: '兑换验证人次',
    3: '兑换明细',
}

export default {
    name: "UploadImg",
    components: { CognPupop },
    props: {
        rightsType: {
            type: Number,
            default: 3
        }
    },
    data() {
        return {
            visible: false,
            indicatorStyle: `height: 50px;color: #37B874;fontWeight: bold;`,
            current: 1,
            organList: [],
            organId: '',
            quantity: null,
            payType: 1,
            value: [0],
            exchangeInfo: {
                exchangeInfo: [],
                integralExchange: false
            }
        }
    },
    created() {
        this.getOrganList()
    },
    computed: {
        title() {
            return titleMap[this.current]
        },
        exchangeMethod() {
            const list = []
            exchangeMethod.forEach((i) => {
                if (i.value === 2) {
                    if (this.exchangeInfo.integralExchange) {
                        list.push(i)
                    }
                } else {
                    list.push(i)
                }
            })
            return list
        }
    },
    methods: {
        async getOrganList() {
            await getOrganList().then(res => {
                this.organList = res || []
            })
        },
        open() {
            this.current = this.organList.length == 0 ? 2 : 1
            this.visible = true
        },
        async confirm() {
            const { rightsType, organId, quantity, payType } = this
            if (this.current === 1) {
                this.current++;
                return
            }
            if (this.current === 2) {
                if (!quantity) {
                    notificationFun('请输入兑换验证次数');
                    return
                }
                getExchangeInfo({ rightsType, organId, quantity }).then(res => {
                    this.exchangeInfo = res
                    this.current++;
                })
                return
            }
            if (this.current === 3) {
                await submitExchange({ rightsType, organId, quantity, payType })
                this.$emit('success')
            }
        },
        cancel() {
            this.visible = false
            this.quantity = null
            this.payType = 1
        },
        bindChange(e) {
            const val = e.detail.value
            console.log(val)
        }
    }
}
</script>

<style scoped lang="scss">
.picker-view {
    width: 750rpx;
    height: 225rpx;
}

.item {
    height: 50px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 50px;
}

.exchange-count {
    padding: 20rpx 20rpx 60rpx;
    box-sizing: border-box;
}

.radio-border {
    border: 1px solid #37B874;
    width: 30rpx;
    height: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-sizing: border-box;
}

.radio-active {
    background-color: #37B874;
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
}

/* 兑换样式 */
.exchangeWrap {
    padding: 0 36rpx 60rpx 36rpx;

    .exchangeWay {
        display: flex;
        align-items: center;
        margin: 60rpx 0 0 40rpx;

        image {
            width: 38rpx;
            height: 38rpx;
        }

        text {
            margin-left: 20rpx;
            margin-right: 30rpx;
        }
    }

    .exchangeStyle {
        background-color: #F2F9F8;
        border-radius: 24rpx;
        min-height: 350rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .topStyle {
            display: flex;
            justify-content: space-between;
            // padding-right: 40rpx;

            .leftStyle {
                width: 316rpx;
                position: relative;

                image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    z-index: 1;
                }

                text {
                    position: absolute;
                    top: 22rpx;
                    left: 30rpx;
                    z-index: 2;
                    font-size: 28rpx;
                }
            }

            .rightStyle {
                display: flex;
                align-items: center;
                color: #37B874;
                flex: 1;
                // justify-content: space-between;
                justify-content: end;
                height: 84rpx;
                font-size: 26rpx;
                padding-right: 6rpx;

                image {
                    width: 26rpx;
                    height: 26rpx;
                    margin-right: 10rpx;
                }

                .lineStyle {
                    background-color: #C8F1DB;
                    width: 4rpx;
                    height: 18rpx;
                    margin: 0 8rpx;
                }
            }
        }

        .centerStyle {
            font-size: 26rpx;
            color: #333333;
            padding: 0 40rpx;
            box-sizing: border-box;
            flex: 1;
            max-height: 300rpx;
            margin-top: 30rpx;
        }

        .bottomStyle {
            border-top: 2rpx solid #FFFFFF;
            font-size: 28rpx;
            font-weight: 600;
            color: #37B874;
            padding: 24rpx 40rpx 24rpx 40rpx;

        }
    }
}
</style>